<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户管理列表</title>
    <link rel="stylesheet" href="statics/layui/css/layui.css">
    <style>
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
            top: 33%;
            transform: translateY(-50%);
        }
    </style>
    <script src="statics/layui/layui.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">客户管理系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    <div id="insert" style="display: inline-flex" ></div>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="user/logout">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">

            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">客户管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="/shouye.html">客户列表</a></dd>
                        <!-- <dd><a href="javascript:;">删除客户</a></dd>
                        <dd><a href="javascript:;">编辑客户</a></dd> -->

                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="/usercrm.html">用户列表</a></dd>
                        <!-- <dd><a href="javascript:;">删除用户</a></dd>
                        <dd><a href="javascript:;">编辑用户</a></dd> -->
                    </dl>
                </li>
                <li class="layui-nav-item"><a href=javascript:;>BOOT客户管理系统</a></li>
            </ul>
        </div>
    </div>

    <!--欢迎<div id="insert" style="display: inline-flex; color: red " ></div>登陆-->
<!-- 标题 -->
<!--<h1 align="center">客户管理</h1>-->
<!-- 查询条件开始 -->
    <div class="layui-body">
        <!-- 内容主体区域 -->

<div style="width: 96%;margin-left: 50px;text-align: center">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend>搜索条件</legend>
    </fieldset>
    <form class="layui-form layui-form-pane" method="post">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">客户名称</label>
<!--                <div class="layui-input-inline">-->
<!--                    <select name="custname" class="layui-input">-->
<!--                        <option value="">请选择客户名称</option>-->
<!--                    </select>-->
<!--                </div>-->
                <div class="layui-input-block">
                    <input type="text" name="custname" id="custname"  autocomplete="off" class="layui-input" placeholder="请选择客户名称">
                </div>
            </div>


            <div class="layui-inline">
                <label class="layui-form-label">客户来源</label>
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="source" id="source"  autocomplete="off" class="layui-input" placeholder="请选择客户来源">-->
<!--                </div>-->
                                <div class="layui-input-inline" >
                                    <select name="source"  class="layui-input" >
                                        <option value="" >请选择客户来源</option>
                                    </select>
                                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">所属行业</label>
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="industry" id="industry"  autocomplete="off" class="layui-input" placeholder="请选择所属行业">-->
<!--                </div>-->
                <div class="layui-input-inline">
                    <select name="industry" class="layui-input">
                        <option value="">请选择所属行业</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">客户级别</label>
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="cust_level" id="cust_level" autocomplete="off" class="layui-input" placeholder="请选择客户级别">-->
<!--                </div>-->
                <div class="layui-input-inline">
                    <select name="cust_level" class="layui-input">
                        <option value="">请选择客户级别</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="doSearch">搜索</button>
                <button type="reset" class="layui-btn layui-btn-warm">重置</button>
            </div>
        </div>
    </form>
</div>

<!-- 查询条件结束 -->

<!-- 数据表格开始 -->
<div style="width: 80%;margin-left: 100px">
    <!-- 表格 -->
    <table class="layui-hide" id="billTable" lay-filter="billTable"></table>

    <!-- 头部工具栏 -->
    <script type="text/html" id="billToolbar">
        <div class="layui-btn-container">
            <!--lay-event进行监听-->
            <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i>添加客户</button>
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
        </div>
    </script>
    <!-- 行工具栏 -->
    <script type="text/html" id="billRowBar">
<i class="layui-icon" lay-event="edit">&#xe642;</i>
<i class="layui-icon" lay-event="delete">&#xe640;</i>
    </script>

</div>
<!-- 数据表格结束 -->
    </div>
<!-- 添加和修改账单的弹出层开始 -->
<div id="addOrUpdateBillDiv" style="display: none;margin: 10px">
    <form id="dataFrm" method="post" class="layui-form  layui-form-pane" lay-filter="dataFrm">
        <!-- 隐藏域，保存当前客户的ID -->
        <input type="hidden" name="cust_id">
        <div class="layui-form-item">
            <label class="layui-form-label">客户名称</label>
            <div class="layui-input-block" id="billTypeDiv">
                <input type="text" name="custname" placeholder="请输入客户名称" lay-verify="required" lay-reqText="请输入客户名称"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" >客户来源</label>
<!--            <div class="layui-input-block">-->
<!--                <input type="text" name="source" placeholder="请输入客户来源" lay-verify="required" lay-reqText="请输入客户来源"  autocomplete="off" class="layui-input">-->
<!--            </div>-->
            <div class="layui-input-block" >
                <select name="source"  class="layui-input" lay-verify="required"  lay-reqText="请选择客户来源">
                    <option value="" >请选择客户来源</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属行业</label>
<!--            <div class="layui-input-block">-->
<!--                <input type="text" name="industry" placeholder="请输入所属行业" lay-verify="required" lay-reqText="请输入所属行业"  autocomplete="off" class="layui-input">-->
<!--            </div>-->
            <div class="layui-input-block">
                <select name="industry" class="layui-input">
                    <option value="">所属行业</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户级别</label>
<!--            <div class="layui-input-block">-->
<!--                <input type="text" name="cust_level" placeholder="请输入客户级别" lay-verify="required" lay-reqText="请输入客户级别"  autocomplete="off" class="layui-input">-->
<!--            </div>-->
            <div class="layui-input-block">
                <select name="cust_level" class="layui-input">
                    <option value="">客户级别</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系人</label>
            <div class="layui-input-block">
                <input type="text" name="linkman" placeholder="请输入联系人" lay-verify="required" lay-reqText="请输入联系人"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">固定电话</label>
            <div class="layui-input-block">
                <input type="text" name="phone" placeholder="请输入固定电话" lay-verify="required" lay-reqText="请输入固定电话"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">移动电话</label>
            <div class="layui-input-block">
                <input type="text" name="moblie" placeholder="请输入移动电话" lay-verify="required" lay-reqText="请输入移动电话"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮政编码</label>
            <div class="layui-input-block">
                <input type="text" name="zipcode" placeholder="请输入邮政编码" lay-verify="required" lay-reqText="请输入邮政编码"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系地址</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入联系地址" name="address" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <button type="button" class="layui-btn" lay-submit lay-filter="doSubmit">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>

<!-- 添加和修改账单的弹出层结束-->

    <script src="statics/layui/layui.js"></script>
<script>
    layui.use(['form','jquery','table','laydate','layer','element'],function () {
        var form = layui.form;
        var $ = layui.jquery;
        var table = layui.table;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var element = layui.element;
        
        //发送Ajax请求查询客户类型
        $.get("Client/search",function(result){
            //console.log(result);
            var html = "";
            var html1 = "";
            var html2 = "";
            var html3 = "";
            //循环遍历集合
            for (let i = 0; i < result.length; i++) {
                if(result[i].dict_type_code=="001"){
                    html1 +="<option value='"+result[i].dict_id+"' >"+result[i].dict_item_name+"</option>"
                }
                if(result[i].dict_type_code=="002"){
                    html2 +="<option value='"+result[i].dict_id+"' >"+result[i].dict_item_name+"</option>"
                }
                if(result[i].dict_type_code=="003"){
                    html3 +="<option value='"+result[i].dict_id+"' >"+result[i].dict_item_name+"</option>"
                }
            }
            //将网页代码追加到下拉列表中
            $("[name='custname']").append(html);
            $("[name='industry']").append(html1);
            $("[name='source']").append(html2);
            $("[name='cust_level']").append(html3);
            //更新渲染select下拉框
            form.render("select");
        },"json");

        //渲染表格组件
        var tableIns = table.render(
            {
            elem:"#billTable",//绑定表格元素，推荐使用ID选择器
            url:"Client/list",//异步请求地址,加入分页后，默认使用page(当前页码)和limit(每页显示数量)作为参数名称
            page:true,//开启分页
            toolbar:"#billToolbar",
            cols: [[ //表头
                //field属性：字段属性，该属性与实体类的属性名一致
                //title属性：表头文本
                {type:"checkbox",fixed:"left",width:80,align:"center"},
                {field: 'cust_id', title: '客户编号',align:"center"}
                ,{field: 'custname', title: '客户名称',align:"center"}
                ,{field: 'source', title: '客户来源',align:"center"}
                ,{field: 'industry', title: '客户行业',align:"center"}
                ,{field: 'cust_level', title: '客户级别',align:"center"}
                ,{field: 'phone', title: '固定电话',align:"center"}
                ,{field: 'moblie', title: '手机',align:"center"}
                ,{title:"操作",toolbar: "#billRowBar",align:"center"}
            ]]
            // parseData: function(res){ //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
            //     var result;
            //     // console.log(this);
            //     // console.log(JSON.stringify(res));
            //     if(this.page.curr){
            //         result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
            //     }
            //     else{
            //         result=res.data.slice(0,this.limit);
            //     }
            //     return {
            //         "code": res.code, //解析接口状态
            //         "msg": res.msg, //解析提示文本
            //         "count": res.count, //解析数据长度
            //         "data": result //解析数据列表
            //     };
            // }


        });

        //监听搜索按钮提交事件
        form.on("submit(doSearch)",function (data) {
            //console.log(data.field);

            tableIns.reload({
                where:data.field,//查询条件
                page:{
                    curr:1
                }
            });
            //禁止页面刷新
            return false;
        });


        //监听表格头部工具栏事件
        table.on("toolbar(billTable)",function (obj) {
            switch (obj.event) {
                //添加
                case 'add':
                    openAddWindow();
                    break;
                //批量删除
                case 'batchDelete':
                    batchDelete();
                    break;
            }
        });

        //监听表格行工具栏事件
        table.on("tool(billTable)",function (obj) {
            switch (obj.event) {
                //编辑
                case 'edit':
                    openUpdateWindow(obj.data);
                    break;
                //删除
                case 'delete':
                    deleteById(obj.data);
                    break;
            }
        });


        var url;//提交地址
        var mainIndex;//窗口索引

        /**
         * 打开添加窗口
         */
        function openAddWindow() {
            mainIndex =layer.open({
                type:1,//弹出层类型
                title:"添加客户",
                area: ['800px', '600px'],
                content:$("#addOrUpdateBillDiv"),//引用的窗口代码
                success:function () {
                    //清空表单数据
                    $("#dataFrm")[0].reset();//JavaScript中的方法
                    url = "Client/addcustomer";
                }
            });
        }

        /**
         * 打开编辑窗口
         */
        function openUpdateWindow(data) {
            console.log(data);
            $.post("Client/findCustomerById",{"id":data.cust_id},function(res){
                if(res.success) {
                    mainIndex =layer.open({
                        type:1,//弹出层类型
                        title:"修改客户",
                        area: ['800px', '600px'],
                        content:$("#addOrUpdateBillDiv"),//引用的窗口代码
                        success:function () {
                            console.log(res.info);
                            form.val("dataFrm",res.info);
                            //修改请求
                            url = "Client/updatecustomer";
                        }
                    });
                }else{

                }
            },"json");
        }

        // function bianji(data) {
        //         //发送ajax请求
        //     console.log(data);
        //         $.post("Client/findCustomerById",{"id":data.cust_id},function(result){
        //             if(result.success) {
        //                 mainIndex =layer.open({
        //                     type:1,//弹出层类型
        //                     title:"修改客户",
        //                     area: ['800px', '600px'],
        //                     content:$("#addOrUpdateBillDiv"),//引用的窗口代码
        //                     success:function () {
        //                         console.log(data);
        //                         form.val("dataFrm",JSON.parse(result.responseText));
        //
        //                         //修改请求
        //                         url = "Client/updatecustomer";
        //                     }
        //                 });
        //             }else{
        //             }
        //         },"json");
        // }


        //监听表单提交事件
        form.on("submit(doSubmit)",function (data) {
            $.post(url,data.field,function(result){
                if(result.success){
                    layer.alert(result.message,{icon:1});
                    //关闭窗口
                    layer.close(mainIndex);
                    layer.close(mainIndex);
                    //刷新数据表格
                    tableIns.reload();
                }

                else{
                    layer.alert(result.message,{icon:2});
                }
            },"json");
            return false;
        });

        /**
         * 删除客户
         * @param data  当前行数据
         */
        function deleteById(data) {
            //提示用户确认是否删除
            layer.confirm("确定要删除编号为[<font color='red'>"+data.cust_id+"</font>]客户吗？",{icon:3,title:"提示"},function (index) {
                //发送ajax请求
                $.post("Client/deleteById",{"id":data.cust_id},function(result){
                    if(result.success){
                        layer.alert(result.message,{icon:1});
                        //刷新数据表格
                        tableIns.reload();
                    }else{
                        layer.alert(result.message,{icon:2});
                    }
                },"json");

                //关闭提示框
                layer.close(index);
            });
        }

        /**
         * 批量删除
         */
        function batchDelete() {
            //获取表格对象
            var checkStatus = table.checkStatus('billTable'); //billTable 即为基础参数 id 对应的值
            //判断是否有选中行
            if(checkStatus.data.length>0){
                //定义数组，保存选中行的ID
                var idArr = [];
                //循环遍历获取选中行(目的是获取选中的每一行的ID值)
                for (let i = 0; i < checkStatus.data.length; i++) {
                    //将选中的ID值添加到数组的末尾
                    idArr.push(checkStatus.data[i].cust_id);
                    //console.log(checkStatus.data[i].cust_id);
                }
                //将数组转成字符串
                var ids = idArr.join(",");
                //提示用户是否删除
                layer.confirm("确定要删除这<font color='red'>"+checkStatus.data.length+"</font>条数据吗？",{icon:3,title:"提示"},function (index) {
                    //发送ajax请求
                    $.post("Client/batchDelete",{"ids":ids},function(result){
                        console.log(ids);
                        if(result.success){
                            layer.alert(result.message,{icon:1});
                            //刷新数据表格
                            tableIns.reload();
                        }else{
                            layer.alert(result.message,{icon:2});
                        }
                    },"json");

                    //关闭提示框
                    layer.close(index);
                });


            }else{
                layer.msg("请选择要删除的数据");
            }

        }
    });

</script>

</body>
<script>
    var url = location.search; //获取url中"?"符后的字串 ('?modFlag=business&role=1')
    var theRequest = new Object();
    if ( url.indexOf( "?" ) != -1 ) {
        var str = url.substr(1); //substr()方法返回从参数值开始到结束的字符串；
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
        }
         console.log(theRequest);
        var insertDiv = document.getElementById("insert");
        console.log(insertDiv);
        insertDiv.innerHTML = `${theRequest.user_name}`;
    }

</script>
</html>